<template>
	<view>
		<view class="travel-top-box">
			<u-swiper :list="list" height="444"></u-swiper>
			<view class="travel-top-item-box">
				<view class="travel-item-top-box mg-lr-25">
					<view class="mg-lr-25 ">
						<text>{{travelDetailData.title}}</text>
					</view>
					<view class="mg-lr-25">
						<text>{{travelDetailData.touristRating}}</text>
					</view>
				</view>
			</view>
			<view class="detail-centent-box mg-lr-25">
				<!-- <mp-html class="mg-lr-25 mg-t-20" :content="html" /> -->
				<!-- <uParse :content="html"></uParse> -->
				<uParse :lazyLoad="true" :domain="domain" :content="travelDetailData.content"></uParse>
			</view>
		</view>
	</view>
</template>

<script>
	import uParse from '@/components/gaoyia-parse/parse.vue'
	export default {
		components:{
			uParse
		},
		data() {
			return {
				domain:"http://47.109.31.62:18080",
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				travelDetailData:{}
			}
		},
		onLoad(options) {
			let travelId = options.id;
			
			uni.setNavigationBarTitle({
				title:options.title
			})
			
			this._initSendtravel(travelId);
		},
		methods: {
			// 请求旅游接口
			async _initSendtravel(id) {
				let travelDetail = await this.$myRequest({
					url: '/rural-revitalization/rtc/travelDetails/queryById',
					method: "GET",
					data:{
						id:id
					}
				})
				
				if(travelDetail.code == 200){
					console.log(travelDetail.result)
					this.travelDetailData = travelDetail.result;
				}else{
					console.log(travel)
				}
			},
		}
	}
</script>

<style>
	/* .travel-top-box{
		position: relative;
		width: 100%;
		height: 570rpx;
		
	} */
	.travel-top-item-box{
		height: 191rpx;
		
	}
	.travel-top__item-box{
		background: #FFFFFF;
		box-shadow: 0px 0px 27rpx 0px rgba(4, 0, 0, 0.24);
		border-radius: 20rpx;
		height: 100%;
	}
	.travel-item-top-box{
		display: grid;
		grid-template-columns: repeat(1,1fr);
		grid-template-rows: repeat(2,1fr);
		height: 100%;
		align-items: center;
		box-shadow: 0px 0px 27rpx 0px rgba(4, 0, 0, 0.24);
		border-radius: 20rpx;
		transform: translateY(-20rpx);
		background: #FFFFFF;
	}
	.travel-item-top-box >:nth-child(1){
		border-bottom: 1rpx solid #EEEEEE;
		height: 100%;
		display: flex;
		align-items: center;
	}
	.travel-item-bottom-box{
		
	}
	.detail-centent-box{
		/* margin-top: 30rpx; */
	}

</style>
